<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照明系统监控</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <style>
        .lighting-monitor {
            padding: 20px;
        }

        .param-card {
            margin-bottom: 20px;
        }

        .zone-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        .zone-item {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }

        .zone-item .icon {
            font-size: 32px;
            color: #409EFF;
            margin-bottom: 10px;
        }

        .zone-item .label {
            color: #606266;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .zone-item .value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
        }

        .zone-item .unit {
            color: #909399;
            font-size: 12px;
        }

        .control-panel {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            padding: 20px;
        }

        .control-card {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .control-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .control-header i {
            font-size: 24px;
            margin-right: 10px;
            color: #409EFF;
        }

        .control-title {
            margin: 0;
            font-size: 16px;
            color: #303133;
        }

        .control-content {
            margin-top: 15px;
            padding: 5px;
        }

        .scene-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-bottom: 20px;
            padding: 0 10px;
        }

        .scene-buttons .el-button {
            width: 100%;
            height: 36px;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 0;
        }

        .scene-buttons .el-button.is-plain:hover {
            border-color: #409EFF;
            color: #409EFF;
            background-color: #ecf5ff;
        }

        .brightness-control {
            padding: 0 10px;
        }

        .brightness-control .el-slider {
            margin-top: 10px;
        }

        .brightness-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #606266;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .brightness-value {
            color: #409EFF;
            font-weight: bold;
        }

        .chart-container {
            height: 400px;
            margin: 20px 0;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .efficiency-analysis {
            padding: 20px;
        }

        .analysis-card {
            margin-bottom: 20px;
        }

        .time-selector {
            margin-bottom: 20px;
        }

        .analysis-chart {
            height: 350px;
            margin: 20px 0;
        }

        .schedule-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        .schedule-table th,
        .schedule-table td {
            padding: 10px;
            text-align: center;
            border: 1px solid #EBEEF5;
        }

        .schedule-table th {
            background-color: #F5F7FA;
            color: #606266;
            font-weight: normal;
        }
    </style>
</head>
<body>
    <div id="lighting-system">
        <el-tabs v-model="activeTab">
            <!-- 实时监测标签页 -->
            <el-tab-pane label="实时监测" name="monitor">
                <div class="lighting-monitor">
                    <!-- 各区域照明状态 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>各区域照明状态</span>
                        </div>
                        <div class="zone-grid">
                            <div class="zone-item" v-for="zone in zones" :key="zone.id">
                                <i class='bx bx-bulb icon'></i>
                                <div class="label">{{zone.name}}</div>
                                <el-tag :type="zone.status === '正常' ? 'success' : 'danger'">{{zone.status}}</el-tag>
                                <div class="value">{{zone.brightness}}</div>
                                <div class="unit">亮度</div>
                                <div class="unit">运行时长：{{zone.runtime}}h</div>
                            </div>
                        </div>
                    </el-card>

                    <!-- 故障设备标记 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>故障设备标记</span>
                        </div>
                        <el-table :data="faultDevices" style="width: 100%">
                            <el-table-column prop="zone" label="区域"></el-table-column>
                            <el-table-column prop="device" label="设备编号"></el-table-column>
                            <el-table-column prop="type" label="故障类型"></el-table-column>
                            <el-table-column prop="time" label="发现时间"></el-table-column>
                            <el-table-column prop="status" label="处理状态">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.status === '已处理' ? 'success' : 'danger'">
                                        {{scope.row.status}}
                                    </el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </div>
            </el-tab-pane>

            <!-- 智能控制标签页 -->
            <el-tab-pane label="智能控制" name="control">
                <div class="lighting-monitor">
                    <div class="control-panel">
                        <!-- 分区域定时控制 -->
                        <div class="control-card">
                            <div class="control-header">
                                <i class='bx bx-time-five'></i>
                                <h3 class="control-title">分区域定时控制</h3>
                            </div>
                            <div class="control-content">
                                <el-form :model="scheduleForm" label-width="100px">
                                    <el-form-item label="选择区域">
                                        <el-select v-model="scheduleForm.zone" placeholder="请选择区域">
                                            <el-option v-for="zone in zones" :key="zone.id" :label="zone.name" :value="zone.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="开启时间">
                                        <el-time-picker v-model="scheduleForm.startTime" placeholder="选择时间">
                                        </el-time-picker>
                                    </el-form-item>
                                    <el-form-item label="关闭时间">
                                        <el-time-picker v-model="scheduleForm.endTime" placeholder="选择时间">
                                        </el-time-picker>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary">保存设置</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>

                        <!-- 场景模式设置 -->
                        <div class="control-card">
                            <div class="control-header">
                                <i class='bx bx-palette'></i>
                                <h3 class="control-title">场景模式设置</h3>
                            </div>
                            <div class="control-content">
                                <div class="scene-buttons">
                                    <el-button type="primary" plain>
                                        <i class='bx bx-sun'></i>
                                        日常办公
                                    </el-button>
                                    <el-button type="primary" plain>
                                        <i class='bx bx-group'></i>
                                        会议模式
                                    </el-button>
                                    <el-button type="primary" plain>
                                        <i class='bx bx-bulb'></i>
                                        节能模式
                                    </el-button>
                                    <el-button type="primary" plain>
                                        <i class='bx bx-moon'></i>
                                        夜间模式
                                    </el-button>
                                </div>
                                <div class="brightness-control">
                                    <div class="brightness-label">
                                        <span>亮度调节</span>
                                        <span class="brightness-value">{{brightness}}%</span>
                                    </div>
                                    <el-slider v-model="brightness" :step="10" show-stops></el-slider>
                                </div>
                            </div>
                        </div>

                        <!-- 感应控制设置 -->
                        <div class="control-card">
                            <div class="control-header">
                                <i class='bx bx-radar'></i>
                                <h3 class="control-title">感应控制设置</h3>
                            </div>
                            <div class="control-content">
                                <el-form :model="sensorForm" label-width="100px">
                                    <el-form-item label="光照感应">
                                        <el-switch v-model="sensorForm.light"></el-switch>
                                    </el-form-item>
                                    <el-form-item label="人体感应">
                                        <el-switch v-model="sensorForm.motion"></el-switch>
                                    </el-form-item>
                                    <el-form-item label="延时关闭">
                                        <el-input-number v-model="sensorForm.delay" :min="0" :max="30" label="分钟"></el-input-number>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>

                        <!-- 当前执行计划 -->
                        <div class="control-card">
                            <div class="control-header">
                                <i class='bx bx-calendar'></i>
                                <h3 class="control-title">当前执行计划</h3>
                            </div>
                            <table class="schedule-table">
                                <thead>
                                    <tr>
                                        <th>区域</th>
                                        <th>开启时间</th>
                                        <th>关闭时间</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="schedule in currentSchedules" :key="schedule.id">
                                        <td>{{schedule.zone}}</td>
                                        <td>{{schedule.startTime}}</td>
                                        <td>{{schedule.endTime}}</td>
                                        <td>
                                            <el-tag size="small" :type="schedule.status === '执行中' ? 'success' : ''">
                                                {{schedule.status}}
                                            </el-tag>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </el-tab-pane>

            <!-- 能效分析标签页 -->
            <el-tab-pane label="能效分析" name="analysis">
                <div class="efficiency-analysis">
                    <!-- 照明用电量统计 -->
                    <el-card class="analysis-card">
                        <div slot="header">
                            <span>照明用电量统计</span>
                            <el-radio-group v-model="timeRange" size="small" style="float: right">
                                <el-radio-button label="day">日</el-radio-button>
                                <el-radio-button label="week">周</el-radio-button>
                                <el-radio-button label="month">月</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="analysis-chart">
                            <div style="color: #909399; text-align: center; line-height: 350px;">
                                此处显示照明用电量统计图表
                            </div>
                        </div>
                    </el-card>

                    <!-- 节能率分析 -->
                    <el-card class="analysis-card">
                        <div slot="header">
                            <span>节能率分析</span>
                        </div>
                        <div class="analysis-chart">
                            <div style="color: #909399; text-align: center; line-height: 350px;">
                                此处显示节能率分析图表
                            </div>
                        </div>
                    </el-card>

                    <!-- 设备寿命预测 -->
                    <el-card class="analysis-card">
                        <div slot="header">
                            <span>设备寿命预测</span>
                        </div>
                        <el-table :data="deviceLifespan" style="width: 100%">
                            <el-table-column prop="zone" label="区域"></el-table-column>
                            <el-table-column prop="device" label="设备类型"></el-table-column>
                            <el-table-column prop="installTime" label="安装时间"></el-table-column>
                            <el-table-column prop="runningHours" label="累计运行时间(h)"></el-table-column>
                            <el-table-column prop="remainingLife" label="预计剩余寿命">
                                <template slot-scope="scope">
                                    <el-progress :percentage="scope.row.remainingLife" :color="customColors"></el-progress>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>

                    <!-- 维护成本统计 -->
                    <el-card class="analysis-card">
                        <div slot="header">
                            <span>维护成本统计</span>
                        </div>
                        <div class="analysis-chart">
                            <div style="color: #909399; text-align: center; line-height: 350px;">
                                此处显示维护成本统计图表
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#lighting-system',
            data() {
                return {
                    activeTab: 'monitor',
                    timeRange: 'day',
                    brightness: 80,
                    zones: [
                        { id: 1, name: '办公区A', status: '正常', brightness: '80%', runtime: 8.5 },
                        { id: 2, name: '会议室', status: '正常', brightness: '75%', runtime: 4.2 },
                        { id: 3, name: '走廊', status: '正常', brightness: '60%', runtime: 12.0 }
                    ],
                    faultDevices: [
                        {
                            zone: '办公区A',
                            device: 'L001',
                            type: '灯具故障',
                            time: '2024-01-20 14:30:00',
                            status: '处理中'
                        }
                    ],
                    scheduleForm: {
                        zone: '',
                        startTime: '',
                        endTime: ''
                    },
                    sensorForm: {
                        light: true,
                        motion: true,
                        delay: 5
                    },
                    currentSchedules: [
                        {
                            id: 1,
                            zone: '办公区A',
                            startTime: '08:30',
                            endTime: '18:00',
                            status: '执行中'
                        },
                        {
                            id: 2,
                            zone: '会议室',
                            startTime: '09:00',
                            endTime: '17:30',
                            status: '等待中'
                        }
                    ],
                    deviceLifespan: [
                        {
                            zone: '办公区A',
                            device: 'LED面板灯',
                            installTime: '2023-06-01',
                            runningHours: 2160,
                            remainingLife: 85
                        }
                    ],
                    customColors: [
                        {color: '#F56C6C', percentage: 20},
                        {color: '#E6A23C', percentage: 40},
                        {color: '#67C23A', percentage: 100}
                    ]
                }
            }
        })
    </script>
</body>
</html> 